<template>
  <div>
    <el-select placeholder="请选择"
               v-model="brandId"
               filterable
               clearable>
      <el-option v-for="item in brands"
                 :key="item.brandId"
                 :label="item.brandName"
                 :value="item.brandId"></el-option>
    </el-select>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import PubSub from 'pubsub-js'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data () {
    // 这里存放数据
    return {
      catId: 0,
      brands: [
        {
          label: 'a',
          value: 1
        }
      ],
      brandId: '',
      subscribe: null
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    brandId (val) {
      console.log('发布', val)
      PubSub.publish('brandId', val)
    },
    catId (value) {
      this.getCatBrands()
    }
  },
  // 方法集合
  methods: {
    getCatBrands () {
      if (this.catId !== null) {
        this.$http({
          url: this.$http.adornUrl(`/product/categorybrandrelation/brands/list/${this.catId}`),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({ data }) => {
          console.log(data.data)
          this.brands = data.data
        })
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    // 监听三级分类消息的变化
    this.subscribe = PubSub.subscribe('catPath', (msg, val) => {
      this.catId = val[val.length - 1]
      this.getCatBrands()
    })
  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () {
    PubSub.unsubscribe(this.subscribe) // 销毁订阅
  }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () {
    PubSub.subscribe('categorys', (msg, res) => {
      console.log('接收:', res)
      this.catId = res[res.length - 1]
    })
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
</style>